<template>
  <div>
  <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#1e90ff"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1" @click="zhuye">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title" >消息</template>
    <el-menu-item index="2-1">最新消息</el-menu-item>
    <el-menu-item index="2-2">过往消息</el-menu-item>  
  </el-submenu>
 <el-submenu index="3" class="ger">
    <template slot="title" >个人资料</template>
    <el-menu-item index="2-1" >编辑资料</el-menu-item>
    <el-menu-item index="2-2"  @click="gerenzx">个人中心</el-menu-item>  
  </el-submenu>
</el-menu>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
    <p class="title">编辑资料</p>
      <el-form-item label="账号" prop="zhanghao" class="aa">
        <el-input type="text" v-model="ruleForm.zhanghao" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="公司名称" prop="company" class="aa">
        <el-input type="text" v-model="ruleForm.company" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address" class="aa">
        <el-input type="text" v-model.number="ruleForm.address" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="position" class="aa">
        <el-input type="text" v-model.number="ruleForm.position" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel" class="aa">
        <el-input type="text" v-model.number="ruleForm.tel" class="inp"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name" class="aa">
        <el-input type="text" v-model.number="ruleForm.name" class="inp"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="tijiao">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    let checkTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!this.checkMobile(value)) {
        callback(new Error("手机号码不合法"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        zhanghao: "",
        company: "",
        address: "",
        position: "",
        tel: "",
        name: ""
      },
      rules: {
        tel: [{ validator: checkTel, trigger: "change" }]
      }
    };
  },
  methods: {
    tijiao() {
      this.axios.post("/hr/qyzl", {
          zhanghao: this.ruleForm.zhanghao,
          company: this.ruleForm.company,
          address: this.ruleForm.address,
          position: this.ruleForm.position,
          tel: this.ruleForm.tel,
          name: this.ruleForm.name
        }).then(res => {
           console.log(res);
           alert(res.data.msg)
        if(res.data.msg=="添加成功"){
            this.$router.push({
        path: "/zhuye"
      });
        }
           var zhang = JSON.parse(res.config.data)
        localStorage.setItem("111",zhang.zhanghao)      
        });
    },
    zhuye() {
      this.$router.push({
        path: "/zhuye"
      });
    },
    gerenzx() {
      this.$router.push({
        path: "/gerenzx"
      });
    },
    checkMobile(str) {
      let re = /^1\d{10}$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style  scoped>
.aa {
  margin-left: 26%;
}
.inp {
  float: left;
  width: 60%;
}
.title {
  font-size: 26px;
  line-height: 50px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.ger{
     float: right;
 }
</style>